<template>
  <div class="content">
    <div class="bank_list">
      <div class="item_list" v-for="(item, index) in listData" :key="index" @click="goToPage(item.value)">
        <div class="item_list_l">
          <ImgT :key="item.value" :src="`/imgs/payment/bindCard/${item.value}.webp`" />
        </div>
        <div class="item_list_l">
          {{ t(item.label) }}
        </div>
        <div class="item_list_l">
          <iconpark-icon icon-id="you" color="#fff" size=".875rem"></iconpark-icon>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const { t } = useI18n();
const listData = ref([
  { label: 'paymentManagement_page_bank', value: 'bank' },
  { label: 'api_usdt', value: 'usdt' },
]);

const goToPage = (url: any) => {
  router.push(`/paymentManagement/${url}`)
}

</script>

<style scoped lang="scss">
.content {
  font-size: 14px;
  margin: 0 0 10px;

  .bank_list {
    padding: 16px 14px 10px;

    .item_list {
      color: #fff;
      position: relative;
      display: flex;
      border-radius: 12px;
      height: 56px;
      line-height: 32px;
      padding: 12px 14px;
      background: #131232;
      box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
      //border: 1px solid #2E296B;
      margin-bottom: 12px;

      .item_list_l {
        display: flex;
        margin-right: 8px;

        &:nth-child(2) {
          flex: 1;
        }

        &:nth-child(n + 2) {
          margin-right: 0;
        }

        img {
          width: 32px;
          height: 32px;
        }
      }

    }
  }
}
</style>
